import React, { Component } from "react";
// 路由跳转
import { SearchBar, WingBlank } from "antd-mobile";
import { Carousel } from "antd";
import store from "../../store";
import "./home.css";
import axios from "axios";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  toMessagebox = () => {
    if (localStorage.getItem("token")) {
      this.props.history.push("/messagebox");
    } else {
      this.props.history.push("/login");
    }
    // this.props.history.push("/messagebox");
  };
  // toimage=()=>{
  //   this.props.history.push('')
  // }
  componentDidMount() {
    store.dispatch({
      type: "footer_hidden",
      hidden: false,
    });

    axios
      .get(
        "https://gank.io/api/v2/data/category/GanHuo/type/Android/page/1/count/20"
      )
      .then((res) => {
        console.log(res);
        this.setState({
          list: res.data.data,
        });
      });
  }
  render() {
    return (
      <div>
        {/* 顶部 */}
        <div className="heard-search">
          <div className="heard-search1">
            <SearchBar
              placeholder="Search"
              onSubmit={(value) => console.log(value, "onSubmit")}
              onClear={(value) => console.log(value, "onClear")}
              onFocus={() => console.log("onFocus")}
              onBlur={() => console.log("onBlur")}
              onCancel={() => console.log("onCancel")}
              onChange={this.onChange}
            />
          </div>
          <div className="heard-search2" onClick={this.toMessagebox}>
            消息盒子
          </div>
        </div>
        <div style={{ marginTop: "20px ", height: "200px  " }}>
          <WingBlank>
            <Carousel autoplay={true} infinite={true}>
              <img
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2907773030,2569079192&fm=26&gp=0.jpg"
                alt=""
                style={{ width: "100%", height: "100%" }}
              />
              <img
                src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4132782348,1291910994&fm=26&gp=0.jpg"
                alt=""
                style={{ width: "100%", height: "100%" }}
              />
              <img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2619042694,1309674893&fm=26&gp=0.jpg"
                alt=""
                style={{ width: "100%", height: "100%" }}
              />
            </Carousel>
          </WingBlank>
        </div>
        <div>
          <ul style={{ paddingLeft: "0", marginBottom: "50px" }}>
            {this.state.list.map((item, index) => {
              console.log(item);
              return (
                <li
                  key={item._id}
                  style={{
                    listStyle: "none",
                    width: "96%",
                    minHeight: "100px",
                    marginLeft: "1.5%",
                    backgroundColor: "#f2f2f2",
                    padding: "20px 20px 20px 20px",
                  }}
                >
                  <p>
                    <b style={{ fontSize: "18px" }}>{item.title}</b>
                  </p>
                  <p>{item.desc}</p>
                  <span>
                    <b>{item.author}</b>
                  </span>
                  <span style={{ marginLeft: "20px" }}>
                    阅读量：{item.views}
                  </span>
                  <span style={{ float: "right" }}>{item.createdAt}</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
export default Home;
